<template>
    <div class="setting-drawer">
        <a-config-provider :theme="{
            token: {
                colorPrimary: themes.colorPrimary
            }
        }">
            <a-button class="fixed top-20 right-0" style="top: 30%;height: auto;z-index: 999999;" type="primary"
                :class="visible ? 'btn_right' : 'btn_right_no'" @click="() => visible = !visible">
                <CloseOutlined v-if="visible" class="font" />
                <SettingOutlined class="font" v-else />
            </a-button>
        </a-config-provider>
        <a-drawer width="350" placement="right" v-model:open="visible">
            <div class="setting-drawer-index-content">
                <div :style="{ marginBottom: '24px' }">
                    <h3 class="setting-drawer-index-title">{{ $t(`message.setting.styleName`) }}</h3>

                    <div class="setting-drawer-index-blockChecbox">
                        <a-tooltip>
                            <template slot="title"> 暗色菜单风格 </template>
                            <div class="setting-drawer-index-item" @click="changeChange('dark', 'theme')">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg"
                                    alt="dark" />
                                <div class="setting-drawer-index-selectIcon" v-if="themes.navTheme === 'dark'">
                                    <CheckOutlined />
                                </div>
                            </div>
                        </a-tooltip>

                        <a-tooltip>
                            <template slot="title"> 亮色菜单风格 </template>
                            <div class="setting-drawer-index-item" @click="changeChange('light', 'theme')">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg"
                                    alt="light" />
                                <div class="setting-drawer-index-selectIcon" v-if="themes.navTheme !== 'dark'">
                                    <CheckOutlined />
                                </div>
                            </div>
                        </a-tooltip>
                    </div>
                </div>

                <div :style="{ marginBottom: '24px' }">
                    <h3 class="setting-drawer-index-title">{{ $t(`message.setting.themeColors`) }}</h3>
                    <div class="colorBox">
                        <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList"
                            :key="index">
                            <template slot="title">
                                {{ item.title }}
                            </template>
                            <a-tag :color="item.color" @click="changeChange(item.color, 'color')"
                                style="padding-bottom: 3px;">
                                <CheckOutlined v-if="item.color === themes.colorPrimary" />
                                <CheckOutlined v-else :style="{ color: item.color }" />
                            </a-tag>
                        </a-tooltip>
                    </div>
                </div>
                <a-divider />

                <div :style="{ marginBottom: '24px' }">
                    <h3 class="setting-drawer-index-title">{{ $t(`message.setting.themeColors`) }}</h3>
                    <div class="setting-drawer-index-blockChecbox">
                        <a-tooltip>
                            <template slot="title"> 侧边栏导航 </template>
                            <div class="setting-drawer-index-item" @click="changeChange('sidemenu', 'mode')">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
                                    alt="sidemenu" />
                                <div class="setting-drawer-index-selectIcon" v-if="themes.layoutMode === 'sidemenu'">
                                    <CheckOutlined />
                                </div>
                            </div>
                        </a-tooltip>

                        <a-tooltip>
                            <template slot="title"> 顶部栏导航 </template>
                            <div class="setting-drawer-index-item" @click="changeChange('topmenu', 'mode')">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg"
                                    alt="topmenu" />
                                <div class="setting-drawer-index-selectIcon" v-if="themes.layoutMode !== 'sidemenu'">
                                    <CheckOutlined />
                                </div>
                            </div>
                        </a-tooltip>
                    </div>
                </div>
                <a-divider />
                <div :style="{ marginBottom: '24px' }">
                    <h3 class="setting-drawer-index-title">{{ $t(`message.setting.MultiLabelMode`) }}</h3>
                    <a-row>
                        <a-col :span="12">{{ $t(`message.setting.OpenMultipleTabs`) }}</a-col>
                        <a-col :span="12">
                            <a-switch v-model:checked="themes.tagShow"
                                @click="changeChange(themes.tagShow, 'switch')" />
                        </a-col>
                    </a-row>
                </div>
                <a-divider />
                <div :style="{ marginBottom: '24px' }">
                    <a-row>
                        <a-col :span="12">{{ $t(`message.setting.LanguageSwitching`) }}:</a-col>
                        <a-col :span="12">
                            <a-select style="width: 100%;" :value="language" @change="cha">
                                <a-select-option v-for="(item, index) in languageList" :key="index"
                                    :value="item.value">{{
                                        item.label }}</a-select-option>
                            </a-select>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-drawer>
    </div>
</template>

<script>
import { SettingOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
import useThemeStore from '@/store/moudle/theme'
import Emitt from '@/utils/mitt'
export default {
    components: { CheckOutlined, SettingOutlined, CloseOutlined },
    data() {
        return {
            visible: false,
            colorList: [
                {
                    color: '#1890FF',
                    title: '拂晓蓝'
                },
                {
                    color: '#F5222D',
                    title: '薄暮'
                },
                {
                    color: '#FA541C',
                    title: '火山'
                },
                {
                    color: '#FAAD14',
                    title: '日暮'
                },
                {
                    color: '#13C2C2',
                    title: '明青'
                },
                {
                    color: '#52C41A',
                    title: '极光绿'
                },
                {
                    color: '#2F54EB',
                    title: '极客蓝'
                },
                {
                    color: '#722ED1',
                    title: '酱紫'
                },
            ],
            themes: {
                colorPrimary: '#1890FF',
                navTheme: 'dark',
                layoutMode: 'sidemenu',
                tagShow: false,
                language: null
            },
            language: 'ch',
            languageList: [
                {
                    value: 'ch',
                    label: '中文'
                },
                {
                    value: 'en',
                    label: 'English'
                },
                {
                    value: 'ja',
                    label: '日本語'
                },
            ]
        }
    },
    mounted() {
        console.log(`output`)
        const res = (useThemeStore().themes).layoutMode
        if (res) {
            this.themes = useThemeStore().themes
            this.language = useThemeStore().themes.language
        }
    },
    methods: {
        changeChange(e, type) {
            switch (type) {
                case 'theme':
                    this.themes.navTheme = e;
                    break;
                case 'color':
                    this.themes.colorPrimary = e;
                    break;
                case 'switch':
                    this.themes.tagShow = e;
                    break
                default:
                    this.themes.layoutMode = e;
            }
            useThemeStore().setPrimaryColor(this.themes)
            Emitt.emit('settings', this.themes)
            this.$emit('change', this.themes)
        },
        cha(e) {
            this.language = e
            this.themes.language = e
            useThemeStore().setPrimaryColor(this.themes)
        }
    },
}
</script>

<style lang="less" scoped>
.setting-drawer-index-content {
    .setting-drawer-index-blockChecbox {
        display: flex;

        .setting-drawer-index-item {
            margin-right: 16px;
            position: relative;
            border-radius: 4px;
            cursor: pointer;

            img {
                width: 48px;
            }

            .setting-drawer-index-selectIcon {
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                padding-top: 15px;
                padding-left: 24px;
                height: 100%;
                color: #1890ff;
                font-size: 14px;
                font-weight: 700;
            }
        }
    }

    .setting-drawer-theme-color-colorBlock {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        float: left;
        margin-right: 8px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        background: #ccc;

        i {
            font-size: 14px;
        }
    }
}

.setting-drawer-index-handle {
    position: absolute;
    top: 240px;
    background: #1890ff;
    width: 48px;
    height: 48px;
    right: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1001;
    text-align: center;
    font-size: 16px;
    border-radius: 4px 0 0 4px;

    i {
        color: rgb(255, 255, 255);
        font-size: 20px;
    }
}

.colorBox {
    height: 20px;
    cursor: pointer;
}


.font {
    font-size: 20px;
    padding: 6px 0px;
}

.btn_right {
    right: 350px;
}

.btn_right_no {
    right: 0px;
}
</style>